import React,{FC} from 'react';
import style from './index.module.scss';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';

import {useSelector} from 'react-redux';

import {IBlockImage} from '../../../interface/img';


interface Iprops{
    hideSwiperDialog:() => void;
    setPageFun:() => void;
}

interface Istore{
    img:{
        curTypeList:IBlockImage[],
        activeIndex:number
    }
}

const SwiperDialog:FC<Iprops> = ({hideSwiperDialog,setPageFun}) => {

    const {curTypeList,activeIndex} = useSelector((state:Istore) => state.img);

    console.log(curTypeList);
    
    return <div className={style.swiper_wrap} onClick={
        hideSwiperDialog
    }>
        <Swiper
            onSlideChange={(swiper) => {
                if(swiper.activeIndex > swiper.slides.length - 2){
                    //改变页码
                    setPageFun();
                }
            }}
            // onSwiper={(swiper) => console.log(swiper)}
            observer={true}
            observeParents={true}
            initialSlide={activeIndex}
        >
            {curTypeList.map(item => <SwiperSlide key={item.Url} className={style.swiper_box}>
                <img src={item.Url.replace('{0}','3')} alt=""/>
            </SwiperSlide>)}
        </Swiper>
  </div>
}

export default SwiperDialog